<template>
  <flexbox :gutter="gutter" align="stretch" class="wk-base-detail-section" wrap="wrap">
    <flexbox-item v-for="(item, index) in list" :key="index"
                  :span="item.span ? item.span : 0.5">
      <flexbox align="stretch" class="wk-base-detail-section__item">
        <div class="item-name">{{ item.label }}</div>
        <div class="item-value">{{ item.value }}</div>
      </flexbox>
    </flexbox-item>
    <el-dropdown v-if="dropdownItems && dropdownItems.length > 0"
                 trigger="hover"
                 class="wk-base-detail-section__more"
                 @command="handleTypeClick">
      <i style="cursor: pointer;" class="el-icon-more"/>
      <template v-slot:dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(item, index) in dropdownItems" :key="index"
                            :icon="item.icon"
                            :command="item.command">{{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <slot/>
  </flexbox>
</template>

<script>

export default {
  name: 'WkBaseDetailSection',
  components: {},
  props: {
    list: Array,
    gutter: {
      type: Number,
      default: 0
    },
    dropdownItems: Array
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
  },

  beforeDestroy() {
  },
  methods: {
    handleTypeClick(type) {
      this.$emit('command-select', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.wk-base-detail-section {
  position: relative;

  &__item {
    width: auto;
    padding: 8px;

    .item-name {
      width: 100px;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
      line-height: 1.5;
    }

    .item-value {
      font-size: 13px;
      color: #333;
      line-height: 1.5;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
  }

  &__more {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
